<template>
  <div>
    <div style="margin-top: 10px">
      <el-form ref="form" :model="form" label-width="80px" class="">
        <el-form-item class="form-item" label="任务名称">
          <el-input v-model="form.name" placeholder="任务名称"></el-input>
        </el-form-item>
        <el-form-item class="form-item">
          <el-button class="form-btn" type="primary" @click="onQuery">查询</el-button>
          <el-button class="form-btn" @click="clearQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div><br/>
    <!--增改删导出-->
    <el-row>
      <el-button class="tag-btn" type="danger" plain @click="delItf('del')">删除</el-button>
      <el-button class="tag-btn" type="info" plain @click="outputItfData">导出</el-button>
      <template>
        <el-input-number class="curPageCounter" @change="handleCurrentChange" v-model="curPage" :min="1" :max="pages" label="描述文字"></el-input-number>
      </template>
    </el-row>

    <!--列表-->
    <template>
      <el-table
        class="interface-table"
        ref="multipleTable"
        :data="jobtableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          align="center"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          align="center"
          prop="id"
          label="ID"
          width="80">
        </el-table-column>
        <el-table-column
          align="center"
          prop="jobId"
          label="任务ID"
          width="140">
        </el-table-column>
        <el-table-column
          align="center"
          prop="jobName"
          label="任务名称"
          width="150">
        </el-table-column>
        <el-table-column
          align="center"
          prop="beanName"
          label="任务实现类"
          width="250">
        </el-table-column>
        <el-table-column
          align="center"
          prop="groupId"
          label="任务组ID"
          width="80">
        </el-table-column>
        <el-table-column
          align="center"
          prop="jobType"
          label="任务类型"
          width="100">
        </el-table-column>
        <el-table-column
          align="center"
          prop="jobTime"
          label="耗时(ms)"
          width="50">
        </el-table-column>
        <el-table-column
          align="center"
          prop="executeTime"
          label="执行时间"
          width="150">
        </el-table-column>
        <el-table-column
          align="center"
          prop="resultCode"
          label="响应码"
          width="100">
        </el-table-column>
        <el-table-column
          align="center"
          prop="resultMsg"
          label="响应描述"
          width="100">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          background
          class="interpage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="curPage"
          :page-sizes="[10, 50, 100, 500]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </template>

  </div>
</template>

<script>
  export default {
    name: "Log",
    props: {
    },
    data() {
      return {
        /*查询表单*/
        form: {
          name: ''
        },
        /*接口列表*/
        jobtableData: [],
        multipleSelection: [],
        /*分页*/
        curPage: 1,
        size: 10,
        total: 0,
        pages: 0,
      }
    },
    mounted: function(){
      this.queryJobList();
    },
    computed: {
      headers() {
        return {
          Authentication: this.$store.state.token,
          RefreshToken: this.$store.state.refresh_token
        };
      }
    },
    methods: {
      //接口查询
      onQuery(){
        this.queryJobList();
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleDelete(index, row) {
        console.log(index, row);
        if(confirm("确认要删除？")){
          this.delItf(row.id);
        }
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.size = val;
        this.queryJobList();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.curPage = val;
        this.queryJobList();
      },
      //删除
      delItf(oprNum){
        let ids = [];
        //删除按钮
        if(oprNum === 'del'){
          //判断是否已选择
          if(this.multipleSelection.length <= 0){
            this.$message.error("请至少选择一条数据！");
            return;
          }
          if(confirm("确认要删除？")){
            this.multipleSelection.forEach(t => {
              ids.push(t.id);
            });
            this.submitDelItf(ids);
          }
        }else { //操作中的删除
          ids.push(oprNum);
          this.submitDelItf(ids);
        }
      },
      //导出接口数据
      outputItfData(){
        //判断是否已选择
        if(this.multipleSelection.length === 0){
          this.$message.error("请至少选择一条数据！");
          return;
        }
        this.$http({
          method: "post",
          url: "/schedule/job/log/export",
          data: this.multipleSelection,
          responseType: "blob"
        }).then(resp => {
          let url = window.URL.createObjectURL(new Blob([resp.data])); //创建blob,设置文件类型
          let a = document.createElement('a'); //创建a标签
          a.download = "任务日志.xls"; //指定文件名
          a.style.display = 'none';
          a.href = url; //创建url
          a.click(); //click事件触发下载
        });
      },

      //查询接口列表
      queryJobList(){
        this.$http.post("/schedule/job/log/queryList", {
          "curPage": this.curPage,
          "size": this.size,
          "jobName": this.form.name
        }).then(resp => {
          if (resp.data.errCode === 200){
            console.log("query success!");
            this.jobtableData = resp.data.data.data;
            this.total = resp.data.data.totals;
            this.jobtableData.curPage = this.curPage;
          }
        })
      },

      //查询单个接口
      queryOne(id){
        this.$http.post("/schedule/job/query/"+id).then(resp => {
          if(resp.data.errCode === 200){
            this.modifyRoleForm.jobId = resp.data.data.jobId;
            this.modifyRoleForm.jobName = resp.data.data.jobName;
            this.modifyRoleForm.jobType = resp.data.data.jobType;
            this.modifyRoleForm.jobDesc = resp.data.data.jobDesc;
            this.modifyRoleForm.beanName = resp.data.data.beanName;
            this.modifyRoleForm.groupId = resp.data.data.groupId;
            this.modifyRoleForm.jobParams = resp.data.data.jobParams;
            this.modifyRoleForm.cron = resp.data.data.cron;
            this.modifyRoleForm.status = resp.data.data.status === 'ON';
          }
        })
      },

      //删除任务日志
      submitDelItf(ids){
        this.$http.post("/schedule/job/log/delete", ids).then(resp => {
          if(resp.data.errCode === 200){
            this.$message.success("删除成功！");
            this.queryJobList();
          }
        })
      },

      //清空查询条件
      clearQuery(){
        this.form = {
          name: ''
        }
      },
      clearAddItfForm(){
        this.addItfForm = {
          jobId: '',
          jobName: '',
          jobType: '',
          jobDesc: '',
          beanName: '',
          groupId: '',
          jobParams: '',
          cron: '',
        }
      },

    },

  }
</script>

<style scoped>
  .form-item{
    margin-left: 20px;
    width: 20%;
    display: inline-block;
  }
  .form-btn{
    position: relative;
    left: -60px;
  }
  .tag-btn{
    margin-left: 20px;
  }
  .interface-table{
    position: relative;
    left: 20px;
    top:10px;
  }
  .interpage{
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
  }
  .curPageCounter{
    float: right;
    right: 40px;
  }
</style>
